<template>
    <div class="intro-wrapper container-channel">
        <router-link to="/guide" class="meida media-user relative clearfix">
            <div class="media-object pull-left"><img :src="userinfo.avatar" alt="" class="img-avtar"></div>
            <div class="media-body over-hidden">
                <h3 class="media-heading">{{userinfo.nickname}}</h3>
            </div>
            <i class="icon van-icon van-icon-arrow"></i>
        </router-link>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    components: {},
    props: {},
    data() {
        return {
        };
    },
    computed: {
        ...mapState({
        userinfo: state => state.userinfo
        })
    },
    methods: {},
    created() {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
.intro-wrapper {
    height: 100%;
    padding: 24px 15px 36px;
    background: #fff;
    position: relative;
    overflow: hidden;

    .media-user {
        display: flex;
        padding: 24px 0;
        border-bottom: 1px solid #eee; 
        position: relative;
    }
    .media-object{
        width: 110px;
        height: 110px;
        border: 1px solid #d0d0d0;
        margin-right: 18px;
        border-radius: 100%;
        overflow: hidden;
    }

    .media-heading { font-size: 32px; }
    .media-desc { font-size: 24px; }
    .media-body {
        display: flex;
        align-items: center;
        line-height: 1.5;
        color: #666;
    }

    .van-icon {
        font-size: 48px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
    }
}
</style>